<template>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
        <div class="grid-container">
            <!--新增 -->
            <el-form-item label="线索编码">
                <el-input v-model="state.dataForm.leadCode" type="text" clearable placeholder="请输入线索编码"></el-input>
            </el-form-item>
            <el-form-item label="线索联系方式">
                <el-input v-model="state.dataForm.contactInfo" type="text" clearable placeholder="请输入线索联系方式"></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
                <el-input v-model="state.dataForm.company" type="text" clearable placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="采购区域">
                <el-input v-model="state.dataForm.purchaseArea" type="text" clearable placeholder="请输入采购区域"></el-input>
            </el-form-item>
        </div>
        <div class="form">
            <div style="display: flex;">
                <el-form-item label="咨询时间">
                    <el-date-picker type="date" placeholder="开始时间" style="width: 120px"
                        v-model="state.dataForm.startDate" value-format="YYYY-MM-DD"></el-date-picker>
                    <span style="margin-top: -14px;margin-left: 10px;margin-right: 10px;">___</span>
                    <el-date-picker type="date" placeholder="结束时间" style="width: 120px"
                        v-model="state.dataForm.endDate" value-format="YYYY-MM-DD"></el-date-picker>
                </el-form-item>
                <el-form-item label="线索状态" style="margin-left: 70px;" >
                    <el-select placeholder="请选择线索状态" clearable v-model="state.dataForm.leadStatus">
                      <el-option label="未读" value="0"></el-option>
                      <el-option label="部分已读" value="1"></el-option>
                      <el-option label="全部已读" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div>
                <!-- 查询 -->
                <el-form-item>
                    <el-button @click="state.getDataList()"
                        style="background: rgba(22, 119, 255, 1);color: #fff;border-radius: 5px;">{{
                            $t("query") }}</el-button>
                </el-form-item>
                <!-- 重置 -->
                <el-form-item>
                    <el-button  @click="resetForm"
                        style="background: rgba(239, 244, 255, 1);border: 1px solid rgba(16, 98, 202, 1);color: #1062CA;border-radius: 5px;">重置</el-button>
                </el-form-item>
            </div>
        </div>
        <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
            v-loading="state.dataListLoading" :data="state.dataList" border
            @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
            <el-table-column align="center" prop="leadCode" label="线索编号" width="160"></el-table-column>
            <el-table-column align="center" prop="contactInfo" label="线索联系电话" width="140" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="totalSubmissionCount" label="留资次数" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="userNames" label="公司名称" width="180" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="purchaseArea" label="采购区域" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="seriesName" label="系列名称" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="brandName" label="品牌" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="productName" label="型号名称" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="quote" label="报价" width="150" show-overflow-tooltip>
              <template v-slot="scope">
                {{ formatQuote(scope.row.quote)}}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="createAt" label="询价时间" width="180" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="leadStatus" label="线索状态" width="120" show-overflow-tooltip>
              <template v-slot="scope">
                <span v-if="scope.row.leadStatus === 0" >未读</span>
                <span v-else-if="scope.row.leadStatus === 1" >部分已读</span>
                <span v-else-if="scope.row.leadStatus === 2" >全部已读</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="" label="操作" width="150" fixed="right" show-overflow-tooltip>
                <template v-slot="scope" v-if="state.hasPermission('pro:sul:contact')">
                    <el-button link style="color: #0581FE;"
                        @click="addOrUpdateHandle(scope.row.id)">查看联系方式</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
        :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
        @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef"></add-or-update>
  <!-- 企业认证弹窗 -->
  <CompanyAuthDialog />
</template>
<script lang="ts" setup>
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus"
import { useRouter } from 'vue-router'
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./consultation-clues-view.vue";
import CompanyAuthDialog from "@/components/CompanyAuthDialog.vue";


const view = reactive({
    getDataListURL: '/noc/consultationlead/page',
    getDataListIsPage: true,
    dataForm: {
        id: "",
        leadCode: "",
        contactInfo: "",
        company: "",
        purchaseArea: "",
        leadStatus: "",
        startDate: "",
        endDate: "",
    },
});

const state = reactive({ ...useView(view), ...toRefs(view) });
state.limit = 20;
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
    addKey.value++;
    nextTick(() => {
        addOrUpdateRef.value.init(id);
    });
};
const resetForm = () => {
    view.dataForm.id = "";
    view.dataForm.leadCode = "";
    view.dataForm.company = "";
    view.dataForm.contactInfo = "";
    view.dataForm.purchaseArea = "";
    view.dataForm.leadStatus = "";
    view.dataForm.startDate = "";
    view.dataForm.endDate = "";
    state.getDataList();
};

/*
 * 价格格式转换
 */
const formatQuote = (quote: string): string => {
  if (quote === null || quote === undefined || /[\u4e00-\u9fa5]/.test(quote) || quote === '') {
    return '-';
  }
  // 检查是否包含 "-"
  if (quote.includes('-')) {
    // 拆分成两部分
    const [part1, part2] = quote.split('-');
    // 分别格式化两部分
    const formattedPart1 = parseFloat(part1).toFixed(2);
    const formattedPart2 = parseFloat(part2).toFixed(2);
    return `${formattedPart1}-${formattedPart2}`;
  }else {
    // 直接格式化
    return parseFloat(quote).toFixed(2);
  }
}
</script>
<style lang="scss" scoped>
.el-input {

    height: 32px;
    opacity: 1;
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
}

.el-select {
    width: 280px;
    height: 32px;
    opacity: 1;
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
}

::v-deep .el-table .cell {
    white-space: nowrap;
    font-size: 13px;
    height: 25px;
    line-height: 25px;
}

.form {
    display: flex;
    justify-content: space-between;
}
.grid-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自动适应列宽，每列至少200px */
    gap: 16px; /* 元素间距 */
}
</style>
